<script setup>
import {ref,watch} from "vue";
import {VueUiKpi} from "vue-data-ui";
import "vue-data-ui/style.css"


const config = ref({
  "animationFrames": 60,
  "animationValueStart": 0,
  "backgroundColor": "#ffffff00",
  "fontFamily": "inherit",
  "layoutClass": "p-4 m-4 rounded-md shadow",
  "layoutCss": "",
  "prefix": "",
  "suffix": "pH",
  "title": "土壤pH值",
  "titleBold": true,
  "titleColor": "rgba(41, 41, 41, 1)",
  "titleClass": "",
  "titleCss": "",
  "titleFontSize": 18,
  "useAnimation": true,
  "valueBold": true,
  "valueColor": "#6376DD",
  "valueClass": "",
  "valueCss": "",
  "valueFontSize": 32,
  "valueRounding": 1,
  "formatter": null,
  "analogDigits": {"show": false, "height": 40, "color": "#1A1A1Aff", "skeletonColor": "rgba(225, 229, 232, 1)"}
})


const dataset = ref(6.1);

import {useCounterStore} from '@/stores/counter.ts'
import {storeToRefs} from 'pinia';
import {Timer} from "@vicons/carbon";
const counterStore = useCounterStore();
const {
  token,
  nowData,
  refreshFlag,

} = storeToRefs(counterStore)
const{
  getNowData
} = counterStore

watch(refreshFlag, (newValue) => {
  // console.log(nowData.value["327061430532576250"])
  dataset.value = nowData.value["327061430532576241"].value
}, {deep: true})

</script>

<template>
  <div style="width:14vw">
    <VueUiKpi :config="config" :dataset="dataset"/>
  </div>
</template>

